<!-- 万人吸毒率 -->
<template lang="html">
 <div class="main">
   <panel title="吸毒人员统计 /" class="panel">
     <router-link style="font-size: 16px;color: #000; font-family: 新宋体;" slot="left" :to="{ path: '/stat/xdry'}">社会面分布</router-link>
     <div class="" slot="right">
       <el-select v-model="year" size="small" style="width: 120px;">
           <el-option
             v-for="item in [2013, 2014, 2015, 2016, 2017]"
             :key="item"
             :label="item === 2017 ? '今天' : `${item + 1}年`"
             :value="item">
           </el-option>
         </el-select>
     </div>
     <div class="body">
       <div class="body-pie">
         <div class="item">
           <div id="stat_hjd" class="chart">
           </div>
           <div class="chart-title" id="stat_hjd_title" v-show="stat_hjd_show">
             户籍地
           </div>
         </div>
         <div class="item">
           <div id="stat_wcn" class="chart">
           </div>
           <div class="chart-title" id="stat_wcn_title" v-show="stat_wcn_show">
             年龄
           </div>
         </div>
       </div>
       <div class="body-map"  v-loading="loading" element-loading-text="拼命加载中" element-loading-background="transparent">
         <div class="map-title" v-show="showLabel">
           【{{selectPlace}}】
         </div>
         <div class="map-title-2" v-show="showLabel">
           <div>常驻人数：{{num.czrk}}万人</div>
           <div>吸毒人数：{{num.xdrk}}人</div>
           <div>万人吸毒率：{{num.wrxdl}}‱</div>
         </div>
         <div class="map" id="stat_wrxdl_map">
         </div>
       </div>
       <div class="body-pie">
         <div class="item">
           <div id="stat_xb" class="chart">
           </div>
           <div class="chart-title" id="stat_xb_title" v-show="stat_xb_show">
             性别
           </div>
         </div>
         <div class="item">
           <div id="stat_fz" class="chart">
           </div>
           <div class="chart-title" id="stat_fz_title" v-show="stat_fz_show">
             犯罪
           </div>
         </div>
       </div>
     </div>
   </panel>
 </div>
</template>

<script>
import panel from '@/components/panel.vue';
import ShMapData from '@/common/js/hn-map-data';
import fetchStatDrugRate from './indexData';
export default {
  data () {
    return {
      stat_hjd_show: true,
      stat_wcn_show: true,
      stat_xb_show: true,
      stat_fz_show: true,
      selectPlace: '',
      showLabel: false,
      loading: false,
      year: 2017,
      data: [],
      charts: {},
      num: {
        'czrk': 0,
        'xdrk': 0,
        'wrxdl': 0
      },
      notShowTitle: [
        '虹口区',
        '长宁区',
        '静安区',
        '黄浦区',
        '普陀区',
        '徐汇区',
        '杨浦区'
      ]
    };
  },
  components: {
    panel
  },
  watch: {
    year (v) {
      // TODO 查询年刷新图表
      this.fetchData();
    },
    selectPlace (v) {
      let name = v === '全省' ? '湖南' : v;
      let place = this.data.find(n => n.name === name);
      this.num = {
        'czrk': place.czrk,
        'xdrk': place.xdrk,
        'wrxdl': (place.xdrk / place.czrk).toFixed(2)
      };
    }
  },
  methods: {
    drawPie (id, { name, data, radius = ['50%', '70%'] }) { // 画大饼
      let chart = this.charts[id];
      let option = {
        tooltip: {
          position: ['10%', '10%'],
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} 人({d}%)'
        },
        legend: {
          // orient: 'vertical',
          orient: 'horizontal',
          x: 'center',
          data: data.map(d => d.name)
        },
        color: data.map(d => d.color),
        series: [
          {
            name: name,
            type: 'pie',
            radius: radius,
            center: ['50%', '58%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '27',
                  fontWeight: 'bold'
                }
              }
            },
            itemStyle: {
              emphasis: {
                show: true,
                shadowColor: 'rgba(100, 100, 100, 0.5)',
                shadowOffsetX: -5,
                shadowBlur: 20
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: data
          }
        ]
      };
      chart.setOption(option, true);
      chart.on('mouseover', () => {
        this[`${id}_show`] = false;
      });
      chart.on('mouseout', () => {
        this[`${id}_show`] = true;
      });
    },
    drawMap (id) {
      // 万人吸毒率
      let h = 0;
      let l = 0;
      let data = this.data.filter(d => d.name !== '湖南').map(d => {
        let value = (d.xdrk / d.czrk).toFixed(2);
        if (value > h) {
          h = parseInt(value) + 1;
        }
        if (l === 0 || value < l) {
          l = parseInt(value);
        }
        return {name: d.name, value: value, czrk: d.czrk, xdrk: d.xdrk};
      });
      console.log(data);
      // let chart = this.$echarts.init(document.getElementById(id));
      let chart = this.charts[id];
      this.$echarts.registerMap('SH', ShMapData);
      chart.setOption({
        title: {
          top: '90%',
          left: '3%',
          text: '湖南省',
          subtext: (this.year + 1) + '各地市自治州吸毒人数统计'
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{b}<br/>{c} (人)'
          formatter (d) {
            return `${d.name}<br/><div style="text-align: left;">常驻人数：${d.data.czrk}万人<br/>吸毒人数：${d.data.xdrk}人<br/>万人吸毒率：<b style="font-size: 20px;">${d.data.value}‱</b></div>`;
          }
        },
        visualMap: {
          min: l,
          max: h,
          text: ['高', '低'],
          left: '53%', // 组件离容器左侧的距离,'left', 'center', 'right','20%'
          top: '2%',
          orient: 'horizontal',
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#78aede', '#478fcf', '#3b82c4']
          }
        },
        series: [
          {
            name: '湖南省各地市自治州吸毒人数',
            type: 'map',
            selectedMode: 'single',
            mapType: 'SH', // 自定义扩展图表类型
            zoom: 1.1,
            itemStyle: {
              normal: {label: {
                show: true,
                formatter: (params) => {
                  if (this.notShowTitle.indexOf(params.data.name) !== -1) {
                    return '';
                  }
                }
              }},
              emphasis: {
                label: {show: true, color: '#fff'},
                borderWidth: 2,
                borderColor: '#efefef',
                areaColor: '#51ade7'
              }
            },
            data: data
          }
        ]
      });
      chart.hideLoading();
      chart.on('mapselectchanged', (param) => {
        let name = param.batch[0].name;
        let select = param.batch[0].selected[name];
        if (select) {
          // 选中
          this.selectPlace = name;
          this.load(this.data.find(n => n.name === name));
        } else {
          this.selectPlace = '全省';
          this.load(this.data.find(n => n.name === '湖南'));
        }
      });
    },
    load ({sark = 0, fsark = 1, bdrk = 0, wdrk = 1, n18 = 1, n19 = 0, n26 = 0, n36 = 0, n61 = 0, nvrk = 1, nanrk = 0}) {
      this.drawPie('stat_hjd', {name: '户籍地',
        data: [
          {value: bdrk, name: '本地', color: '#438C79'},
          {value: wdrk, name: '外地', color: '#42A851'}
        ]});
      this.drawPie('stat_wcn', {name: '年龄',
        data: [
          {value: n18, name: '18岁以下', color: '#C8AA3E'},
          {value: n19, name: '19-25岁', color: '#B83763'},
          {value: n26, name: '26-35岁', color: '#484183'},
          {value: n36, name: '36-60岁', color: '#4196BB'},
          {value: n61, name: '61岁以上', color: '#42A851'}
        ],
        radius: ['50%', '70%']});
      this.drawPie('stat_xb', {name: '性别',
        data: [
          {value: nvrk, name: '女性', color: '#B83763'},
          {value: nanrk, name: '男性', color: '#484183'}
        ]});
      this.drawPie('stat_fz', {name: '犯罪',
        data: [
          {value: sark, name: '涉案', color: '#C8AA3E'},
          {value: fsark, name: '未涉案', color: '#42A851'}
        ]});
    },
    fetchData () {
      this.load({});
      this.loading = true;
      // fetchStatDrugRate({year: this.year}).then(res => {
      let res = fetchStatDrugRate;
      console.log(res);
      this.data = res.data;
      let places = ['岳阳市', '衡阳市', '娄底市', '湘潭市', '益阳市', '长沙市', '常德市', '怀化市', '邵阳市', '张家界市', '湘西土家族苗族自治州', '株洲市', '永州市', '郴州市'];
      let sh = {name: '湖南', czrk: 0, xdrk: 0, sark: 0, fsark: 0, bdrk: 0, wdrk: 0, n18: 0, n19: 0, n26: 0, n36: 0, n61: 0, nvrk: 0, nanrk: 0};
      this.data.forEach(d => {
        if (places.indexOf(d.name) !== -1) {
          sh.czrk += d.czrk;
          sh.xdrk += d.xdrk;
          sh.sark += d.sark;
          sh.fsark += d.fsark;
          sh.bdrk += d.bdrk;
          sh.wdrk += d.wdrk;
          sh.n18 += d.n18;
          sh.n19 += d.n19;
          sh.n26 += d.n26;
          sh.n36 += d.n36;
          sh.n61 += d.n61;
          sh.nvrk += d.nvrk;
          sh.nanrk += d.nanrk;
        }
      });
      this.data.push(sh);
      this.selectPlace = '全省';
      this.load(sh);
      this.num = {
        'czrk': sh.czrk,
        'xdrk': sh.xdrk,
        'wrxdl': (sh.xdrk / sh.czrk).toFixed(2)
      };
      this.loading = false;
      this.drawMap('stat_wrxdl_map');
      this.showLabel = true;
      // }).catch(err => {
      //   console.log(err);
      //   this.$message(`加载数据失败！请联系负责人`);
      // });
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.charts['stat_wrxdl_map'] = this.$echarts.init(document.getElementById('stat_wrxdl_map'));
      this.charts['stat_hjd'] = this.$echarts.init(document.getElementById('stat_hjd'));
      this.charts['stat_wcn'] = this.$echarts.init(document.getElementById('stat_wcn'));
      this.charts['stat_xb'] = this.$echarts.init(document.getElementById('stat_xb'));
      this.charts['stat_fz'] = this.$echarts.init(document.getElementById('stat_fz'));
      window.addEventListener('resize', () => {
        this.charts['stat_wrxdl_map'].resize();
        this.charts['stat_hjd'].resize();
        this.charts['stat_wcn'].resize();
        this.charts['stat_xb'].resize();
        this.charts['stat_fz'].resize();
      });
    });
    setTimeout(_ => {
      this.loading = true;
      this.fetchData();
    }, 700);
  }
};
</script>

<style lang="css" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  .panel {
    height: 100%;
    width: 100%;
    position: relative;
   .body {
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     padding-left: 10px;
     .body-pie {
       width: 25%;
       height: 100%;
       display: flex;
       padding: 5px;
       flex-direction: column;
       .item {
         width: 100%;
         height: 100%;
         position: relative;
         .chart {
           position: absolute;
           z-index: 1;
           width: 100%;
           height: 100%;
         }
         .chart-title {
           position: absolute;
           z-index: 0;
           top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
            margin-top: 8.2%;
           font-size: 25px;
           color: #999;
           font-weight: 800;
         }
       }
       .item::after {
         content: '';
         position: absolute;
         width: 90%;
         height: 3px;
         top: 98%;
         left: 5%;
         right: 5%;
         overflow: hidden;
         /* border-top: 1px solid  rgba(150,150,150,.5); */
         border-bottom: 1px solid  rgba(255,255,255,1);
         background-color: #eee;
       }
     }
     .body-map {
       width: 50%;
       margin: 5px;
       position: relative;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       .map-title {
         position: absolute;
         left: 5px;
         top: 20px;
         font-size: 20px;
         color: #1A71C1;
         font-weight: 600;
       }
       .map-title-2 {
         position: absolute;
         text-align: left;
         left: 20px;
         top: 50px;
         font-size: 14px;
         color: #666;
       }
       .map {
         width: 100%;
         height: 100%;
       }
     }
     .body-map::before {
       content: '';
       position: absolute;
       width: 3px;
       height: 92%;
       top: 4%;
       left: -3px;
       overflow: hidden;
       /* border-left: 1px solid  rgba(150,150,150,.5); */
       border-right: 1px solid  rgba(255,255,255,1);
       background-color: #eee;
     }
     .body-map::after {
       content: '';
       position: absolute;
       width: 3px;
       height: 92%;
       top: 4%;
       right: -3px;
       overflow: hidden;
       /* border-left: 1px solid  rgba(150,150,150,.5); */
       border-right: 1px solid  rgba(255,255,255,1);
       background-color: #eee;
     }
   }
  }
}

</style>
